<template>
    <figure class="courseDesc-block">
        <img :src="item.imagePath" width="200px" height="150px">
        <div class="content-block">
            <div>
                <span class="status" :style="style">{{ item.courseStatus }}</span>
                <span>{{ item.name }}</span>
            </div>
            <div class="description">{{ item.description }}</div>
            <div>{{validTime }} - {{invalidTime}}</div>
        </div>
        <div class="button-block">
            <p>已学习{{ item.partWatchedCount }}/{{ item.partCount }}课时</p>
            <div>
                <Button type="success" :disabled="!item.homeWork" @click="toDatalab">课程作业</Button>
                <Button type="primary" :disabled="item.courseStatus !== '进行中'" @click="toEducation">{{ item.courseStatus  }}</Button>
            </div>
        </div>
    </figure>
</template>

<script>
import { formatData } from '@/utils/format';
export default {
    props:['item'],
    computed:{
        validTime (){
            return formatData(this.item.validTime ,{type:'detail'})
        },
        invalidTime(){
            return formatData(this.item.invalidTime,{type:'detail'})
        },
        style(){
            if(this.item.courseStatus === '未开始'){
                 return{
                    background:"#4D5A6A"
                }
            }else if(this.item.courseStatus === '学习中'){
                 return{
                    background:"#91CD03"
                }
            }else{
                 return{
                    background:"#B9BFC5"
                }
            }
        }
    },
    methods: {
        toDatalab(){
            this.$router.push({path:`/datalab/${this.item.datadescId}`})
        },
        toEducation(){
            this.$router.push({path:`/education/${this.item.id}`})
        }
    },
}
</script>

<style lang="scss" scoped>
    .courseDesc-block{
        display: flex;
        padding: 25px;
        height:200px;
    }
    .content-block{
        margin-left: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & > div{
            font-size: 12px;
            font-weight: 400;
            color: #999999;
        }
        
        & > div:first-of-type{
            font-size:16px;
            font-weight:600;
            color:rgba(51,51,51,1);
        }
        
        .status{
            font-size:10px;
            display:inline-block;
            width:40px;
            height: 19px;
            line-height: 19px;
            border-radius:6px;
            text-align:center;
            color:rgba(255,255,255,1);
        }
        .description{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
   }
   
   .button-block{
       width: 170px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-end;

       p{
            font-size:12px;
            font-weight:400;
            color:rgba(102,102,102,1);
       }
   }
</style>
